Re: Hex Color Shifting

jd--


After reading Chris's question, I ran a few tests with ImageReady. I don't
recall all the details, but basically I started with an empty canvas, then
filled it with a web-safe color, then placed a smaller photo (via drag and
drop). Because the photo was smaller than the background, I ended up with a
photo image surrounded with a web-safe-colored border.


I first tried a couple colors--one at a time--for this background border:

	102,255,0
	102,255,51


I then looked at what happened to these colors when I created jpegs and gifs.

With the jpegs, I got the following color shifts:

	102,255,0 --> 102,255,1

and

	102,255,51 --> 102,254,51

Note that in the first case, the Blue shifted by one; and in the second,
the Green shifted by one.


I then tried gifs, starting with the 102,255,51 background color.

When I selected the Adaptive palette, I got the following color shift:

	102,255,51  -->  102,254,50


When I selected the Web palette, I got no color shift:

	102,255,51  -->  102,255,51



Now, I went back to the Adaptive palette, using the same starting color,
but this time I locked the color. ImageReady has a feature whereby colors
can be selected and locked, so they don't change. This can be done for gif
and png, but I don't think it can be done for jpeg. Now, with the color
locked, I got no shift:

	102,255,51  -->  102,255,51




Now, I performed similar tests in Photoshop. I created a background filled
with the color 102,255,51, and onto this background I dragged a smaller
photo.

I first tried saving this as a jpeg, with the settings Medium Quality #3,
baseline optimized. The resulting jpeg had a color shift in the background:

	102,255,51  -->  103,255,52


I went back to the starting psd file, and saved it again as a jpeg, but
this time used the settings Maximum Quality #10, basline optimized. This
time, the resulting jpeg had no color shift:

	102,255,51  -->  102,255,51




Next I created some gifs, starting with the same psf file. I first tried
the Export GIF89a, using an Adaptive palette with 256 colors. I got this
color shift:

	102,255,51  -->  99,255,49


Next, went back to the original psd file, and changed the Mode to Indexed
Color. after flattening the image, I chose the Web palette, which has 216
colors, and I selected Color Matching Best. The background in the resulting
indexed-color psd file had no color shift. I now exported it as a GIF89a,
and got no color shift:

	102,255,51  -->  102,255,51


There are obviously other permutations that can be tried, including
different optimization qualities in ImageReady. Also, someone may want to
see what happens in non-Adobe applications. BTW, I was using ImageReady
(Mac) v1.0.1 and Photoshop (Mac) v5.0.2.



--Jeff


------------------------------------------------------------------------------

>At 3:15 PM 6/10/99, Chris Hawkins wrote:
>>What is happening is that the saved jpgs (50% compression) are shifting the
>>color by 1, or now 103-204-255, which of course shows slightly lighter and
>>obvious against the background of 102-204-255.  Is this inevitable with
>>compression?
>
>Yes, JPEG files can shift color. They're not lossless like GIF.
>
>Still, it can be hard to match a foreground GIF color to a background HTML
>color in all browsers... particularly at some color depths, some browsers
>may round colors differently.
>
>When people wish to make images appear to merge smoothly into the page's
>background, then there are two techniques I've seen in common use:
>
>--  Using a tiling GIF/JPEG background in the page... this will have the
>same type of color shift as the foreground GIF/JPEG. (In other words, we're
>avoiding matching IMG colors to HTML colors, and are instead laying one
>image atop another image.)
>
>--  Matte a background-trasparent GIF to the general background color of
>the HTML page. This "breaks the box" of the rectangular image, and small
>color shifts won't really be visible with the antialiased pixel matte
>around the edge.
>    (Detail: Make the GIF's background color the same HEX value as the
>destination HTML color, so that the foreground art antialiases to this
>color, and then turn that background color transparent... the result will
>be that your artwork appears to antialias to something very close to the
>HTML color.)
>
>jd
>
>
>
>
>
>John Dowdell, Macromedia Tech Support, San Francisco CA US
>Search technotes: http://www.macromedia.com/support/search/
>Offlist email risks capture by the spam filters. I may not see your
>email if it's not on the list. Private one-on-one email options are
>available via Priority Access: http://www.macromedia.com/support/

HWG: hwg-graphics mailing list archives, maintained by Webmasters @ IWA